<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Marker Drag Events</title>
    <script src="Global.js" language="javascript"></script>
    <script src="XMLWriter.js" language="javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAcsQC4UlEfGGG1BcXjw0CLBT4wMoqzwKnkSPeRyykMDy4UjtFyBT6gjGHabu4cgKzjmO6p8h-TYaGVg" type="text/javascript"></script>
    <script type="text/javascript">
    var prev;
    var markers = [];
    var count = 0;
    //var XMLWriter = new XMLWriter();

    function initialize() {
      	if (GBrowserIsCompatible()) {
        		var map = new GMap2(document.getElementById("map_canvas"));
        		var center = new GLatLng(37.4419, -122.1419);
        		map.setCenter(center, 13);
        		map.addControl(new GSmallMapControl());
       		map.addControl(new GMapTypeControl());
       		map.enableScrollWheelZoom();
 
     		}
		GEvent.addListener(map, "click", function(overlay,point) {
          		if (!overlay) {
          			var marker = new GMarker(point, {draggable:true});
				marker["id"] = count++;
				marker["points"] = [];
				marker["lines"] = [];
				markers.push(marker);
          			GEvent.addListener(marker, "click", function() {  
			      	colorCheck(marker);
				});
				GEvent.addListener(marker, "dragend", function(){
					removeLines(marker.lines, map);
					createLines(marker, marker.points, map);
				});
          			map.addOverlay(marker);  
				if(prev){
					var polyline = new GPolyline([
  						marker.getLatLng(),
  		           	     		prev.getLatLng()], 
                                 	"#ff0000", 2);
					map.addOverlay(polyline);
					marker.points.push(prev);
					prev.points.push(marker);
					marker.lines.push(polyline);
					prev.lines.push(polyline);
				}
				colorCheck(marker);
			}
		});
    }
    function createLines(marker, points, map){
         for(var i = 0; i < points.length; i++){
		var polyline = new GPolyline([
  	      marker.getLatLng(),
  	      points[i].getLatLng()], 
               "#ff0000", 2);
		map.addOverlay(polyline);
		marker.lines.push(polyline);
		points[i].lines.push(polyline);          
         }
    }

    function removeLines(lines, map){
        while(lines.length != 0){
            map.removeOverlay(lines.pop());
        }
    }

    function colorCheck(marker){
	if(marker == prev){
		toggleColor(marker);
		prev = undefined;
         }else{
		if(prev){turnOn(prev)};
		turnOff(marker);
		prev = marker;
        }           
    }
    function toggleColor(marker){
	if(marker.getIcon().image == 'red.png'){
		turnOff(marker);
	}else{
		turnOn(marker);
	}
    }
    function turnOn(marker){
	marker.setImage('red.png');
	marker.getIcon().image = 'red.png';
    }
    function turnOff(marker){
	marker.setImage('blue.png');
	marker.getIcon().image = 'blue.png';       	
    }
    function print(){
	printHeader();
	printMarkers();
	printPaths();
      //var XML = new XMLWriter();
	//XML.BeginNode("Point");
	//XML.Attrib("Lat", prev.getLatLng().lat());
	//XML.Attrib("Lng", prev.getLatLng().lng());
	//XML.EndNode();
	//document.getElementById("info").value += XML.ToString() + "\n";
    }
    function printHeader(){
	document.getElementById("info").value = "<?xml version="1.0" encoding="UTF-8" ?>";
    }
    </script>
  </head>
 
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <FORM NAME="testform">
        <INPUT TYPE="button" NAME="button" Value="Output XML" onClick="print()">
    </FORM>
    <textarea rows="30" cols="100" id="info"></textarea>
  </body>
</html>